﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五星好评案例 （原创）</title>
<script src="../js/jquery.min.js"></script>
<style>
 * {
	padding:0;
	margin:0;
}
.comment {
	font-size:40px;
	color:#ff3100;
}
.comment li {
	float:left;
	cursor:pointer;
}
ul {
	list-style:none;
}
</style>
</head>
<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>

<script>
 $(function() {
     var wjx_none = '☆'; // 空心五角星
     var wjx_sel = '★'; // 实心五角星

     //需求1：鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
     $(".comment li").on("mouseenter", function() {
         //当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
         //                $(this).text(wjx_sel).prevAll("li").text(wjx_sel);
         //                $(this).nextAll("li").text(wjx_none);
         $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
     });

     $(".comment li").on("mouseleave", function() {
         //bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
         if ($("li.current").length === 0) {
             $(".comment li").text(wjx_none);
         } else {
             //当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
             $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
         }
     });


     //需求2：鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
     $(".comment li").on("click", function() {
         //点击哪个li给他加一个类名。清空其他所有的li的类名
         $(this).attr("class", "current").siblings("li").removeAttr("class");
     });


 });
</script>

</body>
</html>
